<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h2>一、是什么</h2>
  <div>Server-Side Rendering 我们称其为SSR，意为服务端渲染</div>
  <br>
  <div>指由服务侧完成页面的 HTML 结构拼接的页面处理技术，发送到浏览器，然后为其绑定状态与事件，成为完全可交互页面的过程</div>
  <br>
  <div>先来看看Web3个阶段的发展史：</div>
  <ul>
    <li>传统服务端渲染SSR</li>
    <li>单页面应用SPA</li>
    <li>服务端渲染SSR</li>
  </ul>
  <h4>传统web开发</h4>
  <div>网页内容在服务端渲染完成，⼀次性传输到浏览器。打开页面查看源码，浏览器拿到的是全部的dom结构</div>
  <h4>单页应用SPA</h4>
  <div>单页应用优秀的用户体验，使其逐渐成为主流，页面内容由JS渲染出来，这种方式称为客户端渲染</div>
  <br>
  <div>打开页面查看源码，浏览器拿到的仅有宿主元素#app，并没有内容</div>
  <h4>服务端渲染SSR</h4>
  <div>SSR解决方案，后端渲染出完整的首屏的dom结构返回，前端拿到的内容包括首屏及完整spa结构，应用激活后依然按照spa方式运行</div>
  <br>
  <br>
  <div>Vue.js 是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出 Vue 组件，进行生成 DOM 和操作 DOM。然而，也可以将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，</div>
  <h2>二、解决了什么</h2>
  <div>SSR主要解决了以下两种问题：</div>
  <ul>
    <li>seo：搜索引擎优先爬取页面HTML结构，使用ssr时，服务端已经生成了和业务想关联的HTML，有利于seo</li>
    <li>首屏呈现渲染：用户无需等待页面所有js加载完成就可以看到页面视图（压力来到了服务器，所以需要权衡哪些用服务端渲染，哪些交给客户端）</li>
  </ul>
  <div>但是使用SSR同样存在以下的缺点：</div>
  <ul>
    <li>复杂度：整个项目的复杂度</li>
    <li>库的支持性，代码兼容</li>
    <li>性能问题</li>
    <ul>
      <li>每个请求都是n个实例的创建，不然会污染，消耗会变得很大</li>
      <li>缓存 node serve、 nginx判断当前用户有没有过期，如果没过期的话就缓存，用刚刚的结果。</li>
      <li>降级：监控cpu、内存占用过多，就spa，返回单个的壳</li>
    </ul>
    <li>服务器负载变大，相对于前后端分离务器只需要提供静态资源来说，服务器负载更大，所以要慎重使用</li>
  </ul>
  <h2>三、如何实现</h2>
  <h2>小结</h2>
  <ul>
    <li>使用ssr不存在单例模式，每次用户请求都会创建一个新的vue实例</li>
    <li>实现ssr需要实现服务端首屏渲染和客户端激活</li>
    <li>服务端异步获取数据asyncData可以分为首屏异步获取和切换组件获取</li>
    <ul>
      <li>首屏异步获取数据，在服务端预渲染的时候就应该已经完成</li>
      <li>切换组件通过mixin混入，在beforeMount钩子完成数据获取</li>
    </ul>
  </ul>
</body>
</html>